<template>
  <div style="margin-top: 50px">
    <el-form :model="value"
             ref="productRelationForm"
             label-width="120px"
             size="small">
      <el-form-item label="规格参数：" v-for="(msg,ind) in splist" :key="ind">
        <el-row>

            <el-col :span="14">
                <block v-for="(item,index) in selectArr" :key="index" :name="index">
                    <el-select
                  
                      v-model="splist[ind].sprelist[index].stid"
                      placeholder="参数">
                      <el-option
                        v-for="res in item"
                        :key="res.stid"
                        :label="res.slrlm"
                        :value="res.stid">
                      </el-option>
                    </el-select>
               </block>

       

            </el-col>

            <el-col :span="8">
              <el-input
              :autoSize="true"
              v-model="splist[ind].price"
              type="text"
              style="width:80px;"

              placeholder="价格">
              </el-input>

              <el-input
              :autoSize="true"
              style="width:80px;"
              v-model="splist[ind].mprice"
              type="text"
              placeholder="市场价">
              </el-input>

              <el-input
              :autoSize="true"
              style="width:80px;"
              v-model="splist[ind].pamaure"
              type="text"
              placeholder="库存">
              </el-input>

              

            </el-col>

        <el-col :span="2" v-if="ind===0">
          <el-button size="small" type="primary" @click="addList()">新增</el-button>
        </el-col>

        <el-col :span="2" v-if="ind!==0">
          <el-button size="medium" type="danger" @click="deleteList(item,index)">删除规格</el-button>
        </el-col>


        </el-row>
         

          
            

      </el-form-item>
      
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  // import {fetchListAll as fetchSubjectList} from '@/api/subject'
  // import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
  import { getSpecKey ,addProduct} from '@/api/addProduct'
const listItem = {
   price:null,
   pamaure:null,
   mprice:null,
   sprelist:[]
  };
  export default {
    name: "ProductRelationDetail",
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 行集合
        splist:[listItem],
        // 参数集合
        sprelist:[

        ],
        // 下拉框数据
        selectArr:[],
        test:'sdffsdd'
      };
    },
    watch:{
      'value.psrele'(){
            this.getDate();
      }
    },
    created() {
      console.log(this.splist);
            // this.getDate();

    },
    methods: {
       // 新增一行
      addList(){
          
            this.splist.push(JSON.parse(JSON.stringify(listItem)));
            console.log(this.splist);
      },
       // 删除一行
      deleteList(item,index){
        this.splist.splice(index,1)
        
      },
      async getDate(){
        console.log(this.value.psrele);
        let list = this.value.psrele;
        let sprelist=[];
        let promises = [];
          list.forEach(val => {
            sprelist.push({stid:''});
            console.log(val);
              promises.push(
                new Promise((resolve,reject)=>{
                  getSpecKey({sid:val.sid}).then(data=>resolve(
                    data.obj
                  ))
                    .catch(reject);
                })
            
              )
          })
      this.splist[0].sprelist=sprelist;
      this.selectArr = await Promise.all(promises);
      
      },

      handlePrev(){
        this.$emit('prevStep')
      },
      handleFinishCommit(){
        // alert('wocao ');
        // console.log('哈哈啊哈');
        // console.log(this.value);
        console.log(this.splist);
       for(let i = 0;i<this.splist.length;i++){
         this.splist[i].price=Number(this.splist[i].price);
         this.splist[i].pamaure=Number(this.splist[i].pamaure);
         this.splist[i].mprice=Number(this.splist[i].mprice);


        
       }

        this.value.splist=this.splist;
        addProduct(this.value).then(res=>{
          if(res.stastus==200){
              this.$message({
                    type: 'success',
                    message: '提交成功',
                    duration:1000
                  });
              this.$router.replace({path: 'product'})

                  // this.$router.back();
              }
           
          console.log(res);
        })
        // this.$emit('finishCommit',this.isEdit);
      }
    }
  }
</script>

<style scoped>

</style>
